<template>
  <div class="app-container">
    <!-- 学习统计 -->
    <div class="backgroundClass">
      <div class="titleBox">
        <span class="title_fontSize">学习统计分析</span>
      </div>
      <div style="display: flex; justify-content: space-between">
        <el-card class="box-card card3">
          <div slot="header" class="clearfix">
            <span class="text">课件学习</span>
          </div>
          <div
            style="
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <div style="display: flex">
              <div
                style="
                  border-radius: 50%;
                  width: 52px;
                  height: 52px;
                  background: rgba(255, 255, 255, 0.2);
                  margin-right: 15px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <svg
                  t="1636532650302"
                  class="icon"
                  viewBox="0 0 1117 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="1880"
                  width="24"
                  height="24"
                >
                  <path
                    d="M558.546809 1005.381835a46.126504 46.126504 0 0 1-15.034169-2.559998L26.718928 800.582021A42.728688 42.728688 0 0 1 0.001862 760.506421V253.719973a41.890871 41.890871 0 0 1 41.658144-42.077053 41.890871 41.890871 0 0 1 41.751235 42.077053v476.904294L558.546809 916.712825l475.135568-186.088558V287.884306a41.890871 41.890871 0 0 1 41.751234-42.123599 41.890871 41.890871 0 0 1 41.658144 42.123599v472.622115a43.613051 43.613051 0 0 1-26.717066 40.122146l-516.793712 202.19327A39.5636 39.5636 0 0 1 558.546809 1005.381835z"
                    fill="#FFFFFF"
                    p-id="1881"
                  ></path>
                  <path
                    d="M558.546809 793.6933a37.422511 37.422511 0 0 1-17.035621-3.490906l-346.111686-140.660235a43.287233 43.287233 0 0 1-27.834156-40.029055V43.520891c0-14.522169 7.30763-28.159974 19.735255-36.445057 12.613807-8.005811 28.392701-9.309082 42.170143-3.444361l189.998373 77.265384a42.728688 42.728688 0 0 1 22.574525 55.854495 45.14905 45.14905 0 0 1-56.645767 23.970887L257.21181 108.684468v471.411936l256.465221 104.261723V184.088036c0-17.54762 11.031263-33.27997 27.787611-39.935963L887.576328 3.584928c13.823987-5.445813 29.416701-4.189087 42.170143 3.44436 12.427625 7.91272 19.921436 21.736708 19.735255 36.491603v565.992213a43.287233 43.287233 0 0 1-27.834157 39.935964l-189.160555 76.427567a45.14905 45.14905 0 0 1-56.645767-24.063978 42.728688 42.728688 0 0 1 22.574525-55.80795l161.41949-65.954849V108.637923l-256.465221 104.168633V749.382068a43.752687 43.752687 0 0 1-19.735255 36.445058 42.91487 42.91487 0 0 1-25.134523 7.866174H558.546809z"
                    fill="#FFFFFF"
                    p-id="1882"
                  ></path>
                </svg>
              </div>
              <div
                style="
                  height: 52px;
                  display: flex;
                  justify-content: center;
                  flex-direction: column;
                "
              >
                <span style="font-size: 22px" v-if="!qyType('qdjsxy')">{{ objForm.m_long > 60
                  ? objForm.m_long > 3600
                    ? parseInt(objForm.m_long / 60 / 60) +
                      "时" +
                      parseInt(parseInt(objForm.m_long / 60) % 60) +
                      "分" +
                      parseInt(objForm.m_long % 60) +
                      "秒"
                    : parseInt(objForm.m_long / 60) +
                      "分" +
                      parseInt(objForm.m_long % 60) +
                      "秒"
                    : objForm.m_long + "秒" }} </span>
                <span style="font-size: 22px" v-else>{{ objForm.class_hour }}学时</span>
                <p
                  style="
                    margin:0;
                    font-size: 15px;
                    color: rgba(255, 255, 255, 0.5);
                  "
                >
                  已学
                </p>
              </div>
            </div>
            <div
              style="
                padding: 8px 26px;
                border: 1px solid rgba(255, 255, 255, 0.2);
                border-radius: 5px;
                font-size: 18px;
              "
              v-if="qyType('qdjsxy')"
            >
              {{ objForm.aim_score }}学时
            </div>
            <div
              style="
                padding: 8px 26px;
                border: 1px solid rgba(255, 255, 255, 0.2);
                border-radius: 5px;
                font-size: 18px;
              "
              v-else
            >
              {{ objForm.m_count }}个
            </div>
          </div>
        </el-card>
        <el-card class="box-card card2" v-if="zsIsYes ? Jurisdiction.正式考试=='显示' : Jurisdiction.模拟考试=='显示'">
          <div slot="header" class="clearfix">
            <span class="text">模拟考试</span>
          </div>
          <div
            style="
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <div style="display: flex">
              <div
                style="
                  border-radius: 50%;
                  width: 52px;
                  height: 52px;
                  background: rgba(255, 255, 255, 0.2);
                  margin-right: 15px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <svg
                  t="1636532485732"
                  class="icon"
                  viewBox="0 0 1068 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="1402"
                  width="24"
                  height="24"
                >
                  <path
                    d="M438.093913 5.342609a127.421217 127.421217 0 0 1 73.015652 0l365.078261 146.610087c43.942957 14.246957 73.015652 58.189913 73.015652 102.132869h0.578783V398.914783c0 19.589565-16.606609 36.196174-36.774957 36.196174a36.507826 36.507826 0 0 1-36.819478-36.196174V295.624348l-365.657043 156.137739v457.683478c5.342609-3.561739 11.842783-7.746783 19.589565-11.887304 10.685217-5.921391 23.730087-13.04487 39.17913-21.370435v0.578783l5.921392-3.561739a35.08313 35.08313 0 0 1 47.504695 11.308521c10.685217 16.606609 5.342609 38.555826-11.308522 48.662261l-72.392347 42.74087-13.668174 8.904348c-2.359652 1.202087-4.763826 1.78087-7.123479 2.982956l-2.359652 1.157565V988.382609c-28.493913 10.106435-66.515478 8.904348-92.605217-4.140522l-365.078261-197.097739C21.949217 772.318609 0 736.077913 0 692.179478v-438.093913C0 203.01913 29.072696 166.199652 73.015652 151.373913z m273.67513 690.398608c23.151304 0 42.74087 22.528 42.74087 49.241044v150.216348c0 27.291826-19.589565 49.864348-42.74087 49.864348s-42.74087-22.572522-42.740869-49.864348v-149.593044c0-31.47687 19.589565-49.864348 42.740869-49.864348z m154.935653-213.704347c23.730087 0 42.74087 23.151304 42.740869 49.864347v359.112348c0 27.336348-19.589565 49.864348-42.740869 49.864348s-42.74087-22.528-42.74087-49.864348v-359.112348c4.140522-27.336348 19.589565-49.864348 42.74087-49.864347z m159.076174 77.156173c23.151304 0 42.74087 23.151304 42.740869 49.285566V890.434783c0 27.291826-19.589565 49.864348-42.740869 49.864347s-42.74087-22.572522-42.74087-49.864347v-281.377392c0-27.291826 19.589565-49.864348 42.74087-49.864348z m-952.765218-267.130434v400.116869c0 14.246957 7.123478 21.949217 21.949218 29.072696l343.129043 185.210435V445.796174L73.015652 292.062609z m416.144696-220.827826h-29.117218l-365.07826 146.031304c-1.157565 0.578783-1.78087 0.578783-2.359653 1.202087l10.462609 4.541217 10.685217 4.630261 177.241044 77.467826 23.151304 10.106435 160.144696 70.032696L862.519652 222.608696c-2.359652-1.78087-5.342609-3.561739-8.281043-5.342609l-365.078261-146.031304z"
                    fill="#FFFFFF"
                    p-id="1403"
                  ></path>
                </svg>
              </div>
              <div
                style="
                  height: 52px;
                  display: flex;
                  justify-content: center;
                  flex-direction: column;
                "
              >
                <span style="font-size: 22px"
                  >{{ parseInt(objForm.mock_avg_score) }}分</span
                >
                <p
                  style="
                    margin: 0;
                    font-size: 15px;
                    color: rgba(255, 255, 255, 0.5);
                  "
                >
                  平均分
                </p>
              </div>
            </div>
            <div
              style="
                padding: 8px 26px;
                border: 1px solid rgba(255, 255, 255, 0.2);
                border-radius: 5px;
                font-size: 18px;
              "
            >
              {{ objForm.mock_count }}次
            </div>
          </div>
        </el-card>
        <el-card class="box-card card1" v-if="Jurisdiction.专项练习=='显示'">
          <div slot="header" class="clearfix">
            <span class="text">专项练习</span>
          </div>
          <div
            style="
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <div style="display: flex">
              <div
                style="
                  border-radius: 50%;
                  width: 52px;
                  height: 52px;
                  background: rgba(255, 255, 255, 0.2);
                  margin-right: 15px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <svg
                  t="1636532599645"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="1723"
                  width="24"
                  height="24"
                >
                  <path
                    d="M510.634671 1023.868587l0.298666 0.128 0.213333-0.128L512 1023.996587a509.182303 509.182303 0 0 0 459.817134-286.548378 39.381202 39.381202 0 1 0-70.741098-34.730551 429.651901 429.651901 0 0 1-350.718831 239.785867v-167.850107a39.381202 39.381202 0 1 0-78.80507 0v168.575438a433.833221 433.833221 0 0 1-390.825364-391.849361h168.746104a39.466535 39.466535 0 0 0 0-78.847737H80.641438a433.790554 433.790554 0 0 1 390.825364-391.764027v168.575438a39.466535 39.466535 0 0 0 78.762404 0V80.682398c208.297972 18.602605 373.630755 183.508722 392.95869 391.97736h-168.703438a39.466535 39.466535 0 0 0 0 78.847737h210.089967c21.759927 0 39.381202-17.706608 39.381202-39.423869C1023.998293 229.716568 794.281726 0 512 0l-0.85333 0.085333h-0.511999C229.03561 0.85333 0.001707 230.100566 0.001707 511.998293c0 281.812394 228.905904 511.144963 510.547631 511.827628h0.085333z"
                    fill="#FFFFFF"
                    p-id="1724"
                  ></path>
                </svg>
              </div>
              <div
                style="
                  height: 52px;
                  display: flex;
                  justify-content: center;
                  flex-direction: column;
                "
              >
                <span style="font-size: 22px">{{
                  parseInt(objForm.exer_done_rate * 100) + "%"
                }}</span>
                <p
                  style="
                    margin: 0;
                    font-size: 15px;
                    color: rgba(255, 255, 255, 0.5);
                  "
                >
                  练习进度
                </p>
              </div>
            </div>
            <div
              style="
                padding: 8px 26px;
                border: 1px solid rgba(255, 255, 255, 0.2);
                border-radius: 5px;
                font-size: 18px;
              "
            >
              {{ objForm.exer_count }}次
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="backgroundClass" style="margin-top: 24px">
      <div>
        <div class="ModelBox">
          <div
            style="
              padding: 10px 20px;
              background: #f7f7f7;
              margin-bottom: 20px;
              margin-top: 10px;
            "
          >
            <header class="header">
              <p style="font-size: 16px">课程学习</p>
              <span
                style="font-size: 14px; color: #1677ff; cursor: pointer"
                @click="
                  () => {
                    this.$router.push(
                      '/record/index?tab=3&zsIsYes=' + this.zsIsYes
                    );
                  }
                "
                >查看详情</span
              >
            </header>
            <div>
              <ul class="asideUl">
                <li>
                  <span>目标学时:</span>
                  <p>{{ objForm.aim_score }}学时</p>
                </li>
                <li>
                  <span>学习次数:</span>
                  <p>{{ objForm.m_learn_count }}次</p>
                </li>
                <li>
                  <span>已学学时:</span>
                  <p>
                    {{
                    objForm.class_hour
                    }}学时
                  </p>
                </li>
              </ul>
            </div>
          </div>
          <div
            style="padding: 10px 20px; background: #f7f7f7; margin-bottom: 20px"
             v-if="Jurisdiction.专项练习=='显示'"
          >
            <header class="header">
              <p style="font-size: 16px">专项练习</p>
              <span
                style="font-size: 14px; color: #1677ff; cursor: pointer"
                @click="
                  () => {
                    this.$router.push(
                      '/record/index?tab=1&zsIsYes=' + this.zsIsYes
                    );
                  }
                "
                >查看详情</span
              >
            </header>
            <div>
              <ul class="asideUl">
                <li style="">
                  <span>练习科目:</span>
                  <p>{{ objForm.exer_sub }}</p>
                </li>
                <li>
                  <span>练习次数:</span>
                  <p>{{ objForm.exer_count }}次</p>
                </li>
                <li>
                  <span>练习进度:</span>
                  <p>{{ parseInt(objForm.exer_done_rate * 100) }}%</p>
                </li>
              </ul>
              <ul class="asideUl">
                <li>
                  <span>正确率:</span>
                  <p>{{ parseInt(objForm.exer_correct_rate * 100) }}%</p>
                </li>
                <li>
                  <span>练习时长:</span>
                  <p>
                    {{
                      parseInt(parseInt(objForm.exer_usetime / 60) / 60) +
                      "小时" +
                      parseInt(parseInt(objForm.exer_usetime / 60) % 60) +
                      "分钟"
                    }}
                  </p>
                </li>
                <li>
                  <span></span>
                  <p></p>
                </li>
              </ul>
            </div>
          </div>
          <div style="padding: 10px 20px; background: #f7f7f7" v-if="zsIsYes ? Jurisdiction.正式考试=='显示' : Jurisdiction.模拟考试=='显示'">
            <header class="header">
              <p style="font-size: 16px">
                模拟考试
              </p>
              <span
                style="font-size: 14px; color: #1677ff; cursor: pointer"
                @click="
                  () => {
                    this.$router.push(
                      '/record/index?tab=2&zsIsYes=0'
                    );
                  }
                "
                >查看详情</span
              >
            </header>
            <div>
              <ul class="asideUl">
                <li style="">
                  <span>模拟次数:</span>
                  <p>{{ objForm.mock_count }}次</p>
                </li>
                <li>
                  <span>平均得分:</span>
                  <p>{{ parseInt(objForm.mock_avg_score) }}分</p>
                </li>
                <li>
                  <span>平均时长:</span>
                  <p>
                    {{
                      parseInt(parseInt(objForm.mock_avg_usetime / 60) / 60) +
                      "小时" +
                      parseInt(parseInt(objForm.mock_avg_usetime / 60) % 60) +
                      "分钟"
                    }}
                  </p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { myTj } from "@/api/admin.js";
import { getapplyid, getsubjectTitle } from "@/utils/auth";
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["userinfor",'Jurisdiction']),
  },
  data() {
    return {
      loading: false,
      objForm: {
        exer_answered: 0,
        exer_done_rate: 0,
        exer_count: 0,
        exer_correct_rate: 0,
        exer_total: 0,
        exer_sub: getsubjectTitle(),
        exer_usetime: 0,
        m_count: 0,
        m_long: 0,
        m_learn_count: 0,
        mock_count: 0,
        mock_avg_score: 0,
        mock_avg_usetime: 0,
      },
      zsIsYes: 0,
    };
  },
  methods: {
    listData() {
      myTj({ applyid: getapplyid() }).then((res) => {
        if (res.code == 200) {
          this.objForm = res.data;
          this.objForm.exer_sub = getsubjectTitle();
        }
      });
    },
  },
  created() {
    this.listData();
    this.userinfor.map((item) => {
      if (item.applyid == getapplyid()) {
        if (item.gz == "一般工贸" || item.gz == "职业卫生") {
          this.zsIsYes = 1;
        } else {
          this.zsIsYes = 0;
        }
      }
    });
  },
};
</script>

<style lang="scss" scoped>
// @import '~@/styles/utis.scss';
.backgroundClass {
  width: 1236px;
  background: #fff;
  padding: 24px;
  // font-weight: 600;
}
.titleBox {
  display: flex;
  min-width: 500px;
  // border-bottom: 1px solid #EEEEEE;
  padding-bottom: 24px;
  .title_fontSize {
    // line-height: 32px;
    font-size: 18px;
  }
}
.text {
  font-size: 20px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 356px;
  height: 174px;

  color: #eee;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
}
.card1 {
  background: #0004af;
}
.card2 {
  background: #f5a623;
}
.card3 {
  background: #e22f2f;
}
::v-deep {
  .el-card__header {
    border-color: rgba(255, 255, 255, 0.4);
  }
  .el-card__body {
    flex: 1;
  }
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.asideUl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  height: auto !important;
  width: 100%;
  li {
    display: flex;
    // justify-content: space-between;
    // align-items: center;
    font-size: 14px;
    span {
      width: 60px;
      text-align: end;
      font-size: 14px;
      color: #999999;
    }
    p {
      margin-left: 24px;
      min-width: 100px;
      max-width: 130px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }
  :first-child {
    p {
      max-width: 190px;
      width: 190px;
    }
  }
}
</style>